<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:46
 * @Description: 价格周报
-->
<template>
  <com-box :title="title">
    <template v-slot>
      <div class="nav">
        <div class="box-list echart-item">
          <div style="width: 95%; margin: auto">
            <div class="main">
              <el-scrollbar
                height="385px"
                style="padding: 10px 0px"
                ref="scrollbar"
                @scroll="handleScroll"
                @mouseover="mouScroll('stop')"
                @mouseout="mouScroll('start')"
              >
                <ul>
                  <li
                    v-for="(item, index) in CurrentPriceList"
                    :key="index"
                    @click="onChoice(item)"
                  >
                    <div class="li-list">
                      <!-- 置顶 -->
                      <img
                        src="@/assets/images/M2/P2/list-top.png"
                        alt=""
                        class="img-top"
                        v-if="item.isPinned"
                      />
                      <!-- 图标 -->
                      <img
                        src="@/assets/images/M2/P2/list-icon.png"
                        alt=""
                        class="img-icon"
                      />
                      <div class="li-list-name">
                        {{ item.title }}
                      </div>
                    </div>
                    <div v-if="item.sendTime" class="li-list-exeNo">
                      {{ item.sendTime }}
                    </div>
                  </li>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts">
import comBox from '@/components/comBox/comBox.vue'
import {
  defineComponent,
  reactive,
  onMounted,
  onBeforeUnmount,
  ref,
  watch,
  toRefs
} from 'vue'
import httpRequest from '@/service'
export default defineComponent({
  name: 'rightLower',
  components: { comBox },
  setup() {
    // 列表
    const state: any = reactive({
      timerFlag: true,
      time: '',
      title: '',
      CurrentPriceList: [],
      loading: false,
      timer: null,
      getCurrentPrice: () => {
        state.loading = true
        httpRequest
          .get({
            url: 'M2P3JgrdList',
            params: {}
          })
          .then((res) => {
            if (res.code == 200) {
              state.title = res.title
              state.CurrentPriceList = res.data.map((item: any) => ({
                ...item,
                sendTime: item.fbTime ? item.fbTime : item.sendTime
              }))
            }
            state.loading = false
          })
          .catch(() => {
            console.log('请求失败')
            state.loading = false
          })
      }
    })
    const scrollbar = ref()
    let curScrollTop = 0
    onMounted(() => {
      onScroll()
    })
    const onScroll = () => {
      state.timer = setInterval(() => {
        if (state.timerFlag) {
          curScrollTop++
          scrollbar.value?.setScrollTop(curScrollTop)
        }
        if (
          scrollbar.value &&
          curScrollTop - scrollbar.value.wrap$.scrollTop > 1
        ) {
          curScrollTop = 0
        }
      }, 50)
    }
    const mouScroll = (val: string) => {
      if (val === 'stop') {
        state.timerFlag = false
      } else {
        state.timerFlag = true
        if (scrollbar.value) {
          curScrollTop = scrollbar.value.wrap$.scrollTop
        }
      }
    }
    // 滚动时触发
    const handleScroll = (pos: any) => {
      curScrollTop = pos.scrollTop
    }
    const onChoice = (row: any) => {
      window.open(row.original_link, '_blank')
    }
    onBeforeUnmount(() => {
      clearInterval(state.timer)
    })
    state.getCurrentPrice()
    const refreshData = () => {
      state.getCurrentPrice()
    }

    return {
      ...toRefs(state),
      onChoice,
      mouScroll,
      handleScroll,
      scrollbar,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
.nav {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 5px;
  // background-color: rgba(33, 122, 255, 0.1);
  .echart-item {
    width: 100%;
  }
  .box-list {
    border-bottom: 2px solid #1b3a80;
    height: 100%;
    // height: 486px;
    overflow: hidden;
    ::v-deep(.slot-box) {
      padding-bottom: 20px;
    }
    ul {
      width: 100%;
      height: 100%;
      padding: 0 10px;
      li {
        color: rgba(255, 255, 255, 1);
        border: 1px solid transparent;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        background: linear-gradient(
          -90deg,
          rgba(26, 123, 230, 0) 0%,
          rgba(21, 67, 128, 0.6) 100%
        );
        margin-top: 10px;
        &:nth-child(1) {
          margin-bottom: 0px;
        }
        &:hover {
          border-color: rgba(55, 225, 255, 1);
          .li-list-name {
            color: rgba(0, 204, 255, 1);
          }
        }
        .li-list {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          position: relative;
          height: 100%;
          width: calc(100% - 105px);
          .img-top {
            position: absolute;
            left: 0;
            top: 0;
            width: 24px;
            height: 24px;
          }
          .img-icon {
            margin-left: 8px;
            height: 33px;
            width: 33px;
          }
        }
        .li-list-name {
          text-indent: 0.5em;
          text-align: left;
          display: inline-block;
          width: calc(100% - 50px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .li-list-exeNo {
          margin-right: 20px;
          width: 85px;
          white-space: nowrap;
          font-size: 14px;
          color: #fff;
          word-break: break-all;
        }
      }
    }

    ::v-deep(.com-box .slot-box) {
      height: calc(100% - 55px);
    }
    .red {
      p {
        font-size: 16px;
        font-weight: 550;
        color: rgb(255, 38, 38);
      }
    }
    .green {
      p {
        font-weight: 550;
        font-size: 16px;
        // color: #02ffb5;
        color: rgb(66, 255, 0);
      }
    }
  }
}
</style>
